<template>
  <div class="e-wrap">
      <div class="e-filter-options clearfix">
        <div class="e-filter">
          <div class="e-item">
              <span class="title">账户名称</span>
              <div class="dis-block">
                <w-input :holder='`请填写`' v-model="queryParams.trueName"></w-input>
              </div>
          </div>
        </div>
        <div class="e-btn">
          <w-button @on-click='changePage(1)'>搜索</w-button>
        </div>
      </div>
      <!-- 银行卡列表 -->
      <div class="e-filter-list">
        <div class="e-add">
          <w-button @on-click='_getBankCardInfo'>新增银行卡</w-button>
        </div>
        <!-- 列表数据 -->
        <div class="e-list clearfix" v-if="bankCardList.totalCount">
          <w-table :columns="columns" >
            <tr v-for="(val, index) in bankCardList.recordList" :key="index">
              <td>
                <w-checkbox v-model="val.isChecked" :label='val.id' @on-change='changeCheckedList(val.id)'></w-checkbox>
              </td>
              <td>{{val.bankType == '1' ? '个人账户' : '企业账户'}}</td>
              <td>{{val.trueName}}</td>
              <td>{{val.bankNumber}}</td>
              <td>{{val.bankName}}</td>
              <td>{{val.subBranchName}}</td>
              <td>{{val.bankAddress}}</td>
              <td>{{val.defaultCollection == '0' ? '否' : '是'}}</td>
              <td>
                <em class="cur" @click="_getBankCardInfo(val)">编辑 |</em>
                <em class="cur" @click="delPanel = true; delParams.idList = [val.id]">删除</em>
              </td>
            </tr>
          </w-table>
          <div class="all">
            <span>
              <w-checkbox v-model='all' :label='`all`' @on-change='changeCheckedList("all")'><span>本页全选</span></w-checkbox>
            </span>
            <em @click="deleteChecked">删除</em>              
          </div>
          <!-- 分页 -->
          <div class="fr" style="margin-top: 30px">
            <w-paging :current="bankCardList.currentPage" :total="bankCardList.pageCount"  @on-page='changePage'></w-paging>
          </div>
        </div>

        <!-- 没有数据时 -->
        <div class="e-list" v-else>
          <w-table :columns="columns" >
            <tr>
              <td colspan="9">暂无数据</td>
              </tr>
          </w-table>
        </div>
      </div>

    <!-- 新增银行卡 -->
    <w-panel-validate v-model="bankCardPanel" :panel-title="true" :title="`${addParams.id ? '编辑' : '新增'}银行卡`" :width="`580px`" :height="`560px`" :confirmText='`保存`' @on-confirm='submitSave'>
      <div class="card-panel">
        <table>
          <tr>
            <td>*账户类型</td>
            <td>
              <span>
                <w-radio :label='1' name='type' v-model="addParams.bankType">个人账户</w-radio>
              </span>
              <w-radio :label='2' name='type' v-model="addParams.bankType">企业账户</w-radio>
            </td>
          </tr>
          <tr>
            <td>*账户名称</td>
            <td>
              <w-input :holder='`请填写`' v-model="addParams.trueName" rule="isEmpty" error="*此项必填"></w-input>
            </td>
          </tr>
          <tr>
            <td>*账户号码</td>
            <td>
              <w-input :holder='`请填写`' v-model="addParams.bankNumber" rule="isEmpty|isBank" error="*此项必填|*银行卡为纯数字，且15-19位"></w-input>
            </td>
          </tr>
          <tr>
            <td>开户地址</td>
            <td class="addr">
              <div>
                <w-select :selectLabel='`省份`' :defaultSe='false' :options='provinceCityList' v-model='addParams.provId' @on-select='changeProv(addParams.provId)' @on-all='getProv'></w-select>
              </div>
              <div>
                <w-select :selectLabel='`市份`' :defaultSe='false' :options='cityList' v-model="addParams.cityId"  @on-all='getCity'></w-select>
              </div>
            </td>
          </tr>
          <tr>
            <td>*开户行</td>
            <td>
              <w-select :options='allBankList' :defaultSe='false' v-model="addParams.bankId" @on-all='getBankName'></w-select>
            </td>
          </tr>
          <tr>
            <td>所属支行</td>
            <td>
              <w-input :holder='`请填写`' v-model="addParams.subBranchName" rule="isEmpty" error="*此项必填"></w-input>
            </td>
          </tr>
          <tr>
            <td>*是否为默认收款账户</td>
            <td>
              <span>
                <w-radio :label='1' name='default' v-model="addParams.defaultCollection">是</w-radio>
              </span>
              <w-radio :label='0' name='default' v-model="addParams.defaultCollection">否</w-radio>
            </td>
          </tr>
        </table>  
      </div>
    </w-panel-validate>

      <!-- 删除银行卡 -->
    <w-panel-fixed-wrap v-model="delPanel" :panel-title="true" title="删除银行卡" :width="`260px`" :height="`200px`" @on-confirm='submitDelete'>
      <div class="panel-classify">
        是否确认删除银行卡
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { apiBankCardMange, apiCity } from 'js/api'
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      columns: [
        {title: '', width: '5%'},
        {title: '账户类型', width: '7%'},
        {title: '账户名称', width: '9%'},
        {title: '账户号码'},
        {title: '开户行', width: '10%'},
        {title: '所属支行'},
        {title: '开户行城市'},
        {title: '默认打款账户', width: '7%'},
        {title: '操作', width: '12%'}
      ],
      all: false,
      bankCardPanel: false,
      delPanel: false,
      // 查询银行卡列表 -- 参数
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        currentPage: 1,
        showCount: 10,
        trueName: ''
      },
      bankCardList: [], // 银行卡 列表
      areaList: [], // 所有地区列表
      // 新增/编辑 银行卡 -- 参数
      addParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: '',
        bankType: 1,
        trueName: '',
        bankNumber: '',
        provId: '',
        cityId: '',
        bankAddress: '',
        subBranchName: '',
        defaultCollection: '0',
        bankId: '',
        bankName: ''
      },
      // 获取银行卡信息 -- 参数
      getParams: {
        id: '',
        accessToken: '',
        threeMenuCode: this.$route.query.three || ''
      },
      cityList: [], // 城市列表
      // 删除银行卡 -- 参数
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        idList: []
      }
    }
  },
  computed: {
    ...mapGetters(['token', 'allBankList', 'provinceCityList'])
  },
  created() {
    this._getBankCardList()
    // this._getAreaList()
    this.fetchAllBank()
    this.fetchProvCity()
  },
  methods: {
    ...mapActions(['fetchAllBank', 'fetchProvCity']),
    // 获取 银行卡列表
    _getBankCardList() {
      this.queryParams.accessToken = this.token
      apiBankCardMange.queryBankCard(this.queryParams).then(data => {
        if (data.code != '200') return
        this.bankCardList = data.data
      })
    },
    changePage(page) {
      this.queryParams.currentPage = page
      this._getBankCardList()
    },
    // 选中银行卡 -- 列表
    changeCheckedList(params) {
      this.delParams.idList = []
      if (params == 'all') {
        this.bankCardList.recordList.forEach(val => {
          this.$set(val, 'isChecked', this.all)
          if (this.all) {
            this.delParams.idList.push(val.id)
          }
        })
      } else {
        let count = 0
        this.bankCardList.recordList.forEach(val => {
          if (val.isChecked) {
            count++
            this.delParams.idList.push(val.id)
          }
        })
        if (count == this.bankCardList.recordList.length) {
          this.all = true
        } else {
          this.all = false
        }
      }
    },
    // 获取 所有地区列表
    _getAreaList() {
      apiCity().then(data => {
        if (data.code != '200') return
        this.areaList = data.data.transArea.map(item => {
          return {
            value: item.id,
            label: item.areaName
          }
        })
      })
    },
    // 获取银行卡信息
    _getBankCardInfo (data) {
      this.bankCardPanel = true
      this.cityList = []

      this.addParams.id = data ? data.id : ''
      this.addParams.bankType = data ? data.bankType : 1
      this.addParams.trueName = data ? data.trueName : ''
      this.addParams.bankNumber = data ? data.bankNumber : ''
      this.addParams.bankAddress = data ? data.bankAddress : ''
      this.addParams.subBranchName = data ? data.subBranchName : ''
      this.addParams.defaultCollection = data ? data.defaultCollection : '0'
      this.addParams.bankId = data ? data.bankId : ''
      this.addParams.bankName = data ? data.bankName : ''

      this.addParams.provId = data ? data.provId : ''
      if (data) {
        this.provinceCityList.some(item => {
          item.child.some(val => {
            if (val.id == data.cityId) {
              this.addParams.provId = item.value
              return true
            }
          })
        })
        this.changeProv(this.addParams.provId)
      }
      this.addParams.cityId = data ? data.cityId : ''
    },
    // 省份改变，改变城市
    changeProv(provId) {
      this.addParams.cityId = ''
      const province = this.provinceCityList.filter(item => {
        if (item.value == provId) {
          return item.child
        }
      })
      this.cityList = province[0].child.map(val => {
        return {
          value: val.id,
          label: val.areaName
        }
      })
      // this.addParams.cityId = this.cityList[0].value
    },
    getBankName(data) {
      this.addParams.bankName = data.label
    },
    getProv(data) {
      this.addParams.bankAddress = data.label + '省'
    },
    getCity(data) {
      this.addParams.bankAddress += data.label
    },
    // 提交 保存银行卡
    submitSave() {
      this.addParams.accessToken = this.token
      if (!this.addParams.cityId) {
        this.$toast('请选择开户地址')
        return
      }
      if (!this.addParams.bankId) {
        this.$toast('请选择开户行')
        return
      }
      this.addParams.bankType = Number(this.addParams.bankType)
      this.addParams.cityId = String(this.addParams.cityId)
      apiBankCardMange.saveBankCard(this.addParams).then(data => {
        if (data.code != '200') return
        this.$toast('保存成功', () => {
          this.bankCardPanel = false
          this._getBankCardList()
        })
      })
    },
    deleteChecked() {
      if (!this.delParams.idList.length) {
        this.$toast('请先选择银行卡')
        return
      }
      this.delPanel = true
    },
    // 删除银行卡
    submitDelete() {
      this.delParams.accessToken = this.token
      apiBankCardMange.delBankCard(this.delParams).then(data => {
        if (data.code != '200') return
        this.$toast('删除成功', () => {
          this.delPanel = false
          this.changePage(1)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-filter-options {
  padding-bottom: 20px;
  border-bottom: 1px solid $border-gray-light;
  .dis-block {
    vertical-align: middle;
  }
}
.e-item {
  margin-left: 0;
  margin-right: 20px;
}
.e-filter-list {
  width: 100%;
  table {
    tr {
      font-size: 14px;
      & td:nth-of-type(1) {
        border-right: 0;
      }
    }
  }
  em {
    color: $color-text-bule;
  } 
  .all {
    margin-top: 10px;
    & > span {
      margin-left: 18px;
      margin-right: 20px;
    }
  }
  .e-add {
      margin: 20px 0;
  }
}
.card-panel {
  tr {
    height: 50px;
    .addr {
      & > div {
        display: inline-block;
        width: 150px;
        &:first-child {
          margin-right: 10px;
        }
      }
    }
    & td:first-child {
      text-align: right;
      padding-right: 10px;
      font-size: 12px;
    }
    & td:last-child {
      width: 320px;
      span {
        display: inline-block;
        width: 100px;
      }
    }
  }
}
</style>